<template>
  <div  class="constanis">
    <el-form ref="loginform" :model="loginform" :rules="loginform2">
      <el-form-item class="login_input" prop="name">
        <el-input size="small" placeholder="登录名" v-model="loginform.name"  @keyup.enter.native="submitForm" clearable></el-input>
      </el-form-item>
      <el-form-item class="login_input" prop="pass">
        <el-input
          size="small"
          placeholder="密码"
          type="password"
          v-model="loginform.pass"
          class="login_input1"
          prefix-icon="el-icon-goods"
          clearable
          @keyup.enter.native="submitForm"
        ></el-input>
      </el-form-item>
      <el-form-item class="login_input">
        <el-button  
          class="login_btn"
          type="primary"
          round
          @click.native.prevent="submitForm('loginform')"
        >登录{{count}} </el-button>
      </el-form-item>
      <button @click="addActions">加加加</button>
    </el-form>
  </div>
</template>

<script>

import { mapGetters ,mapActions} from 'vuex'
export default {
  data() {
    // 登录名
    const validatephoneNo = (rule, value, callback) => {
      var reg = /^[a-zA-Z0-9]{1,20}$/;
      if (!value) {
        callback(new Error("登录名不能为空！"));
      } else if (!reg.test(value)) {
        callback(new Error("登录名输入不正确！"));
      } else {
        callback();
      }
    };
    // 密码
    const validatepassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空！"));
      } else if (!(value.length > 7 && value.length < 12)) {
        callback(new Error("密码输入不正确！"));
      } else {
        callback();
      }
    };
    return {
    
      loginform: {
        pass: '',
        name: ''
      },
      loginform2: {
        name: [{ required: true, validator: validatephoneNo, trigger: "blur" }],
        pass: [{ required: true, validator: validatepassword, trigger: "blur" }]
      }
    };
  },
  methods: {
     ...mapActions(['addActions']),
    submitForm(loginform) {
      this.$refs.loginform.validate(version => {
            console.log(version+"==登錄===="+this.loginform.pass);
           this.$router.push("/Layout/Home");
          
          
             
      })
    }
  },
  computed:{
 ... mapGetters(['count'])
  }
};
</script>

<style lang="scss" scoped>
.constanis {
  margin-top: 30px;
  .login_input {
    width: 312px;

    .login_input1 {
      height: 44px;
    }
    .login_btn {
      width: 312px;
    }
  }
}
</style>